<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-09-10 15:31:10
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-10-10 10:38:28
 * @FilePath: \BLOG\src\components\common\IconLable.vue
-->
<template>
  <div class="browser-os-icon-wrap">
    <div class="browser-os-icon-inner">
      <template v-if="type == 'browser'">
        <img v-if="value.includes('Chrome') || value.includes('Google')" src="../../assets/images/icon/google.svg" />
        <img v-else-if="value.includes('Edge')" src="../../assets/images/icon/edge.svg" />
        <img v-else-if="value.includes('Safari') || value.includes('AppleWebKit')" src="../../assets/images/icon/safari.svg" />
        <img v-else-if="value.includes('Firefox')" src="../../assets/images/icon/huohu.svg" />
        <img
          v-else-if="value.includes('Harmony') || value.includes('HarmonyOS') || value.includes('HUAWEI') || value.includes('EMUI') || value.includes('huawei')"
          src="../../assets/images/icon/huawei.svg" />
        <span :style="{ color: !value ? '#ccc' : '' }" v-if="showValue">{{ value ? value : '无' }}</span>
      </template>
      <template v-if="type == 'os'">
        <img v-if="value.includes('Windows')" src="../../assets/images/icon/windows.svg" />
        <img
          v-else-if="value.includes('IOS') || value.includes('iPhone') || value.includes('iPad') || value.includes('Mac') || value.includes('iOS')"
          src="../../assets/images/icon/ios.svg" />
        <img v-else-if="value.includes('Android')" src="../../assets/images/icon/anzhuo.svg" />
        <img
          v-else-if="value.includes('Harmony') || value.includes('HarmonyOS') || value.includes('HUAWEI') || value.includes('EMUI') || value.includes('huawei')"
          src="../../assets/images/icon/hongmeng.svg" />
        <img v-else-if="value.includes('Linux') || value.includes('LINUX')" src="../../assets/images/icon/linux.svg" />
        <img v-else-if="value.includes('UBUNTU') || value.includes('Ubuntu')" src="../../assets/images/icon/ubantu.svg" />
        <span :style="{ color: !value ? '#ccc' : '' }" v-if="showValue">{{ value ? value : '无' }}</span>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  type: {
    type: String,
    default: 'browser'
  },
  value: {
    type: String,
    default: ''
  },
  showValue: {
    type: Boolean,
    default: false
  }
});
</script>

<style lang="scss" scoped>
.browser-os-icon-wrap {
  display: inline-block;
  .browser-os-icon-inner {
    display: flex;
    align-items: center;
    img {
      height: 16px;
      margin-right: 5px;
    }
  }
}
</style>
